<template>
  <div>
    <div class="search-popup">
      <van-search
        v-model="searchVal"
        show-action
        :placeholder="placeholderVal"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
      />
      <!-- @input="onInput" 输入框内容发生变化时触发-->
      <history-hot v-if="blockShow == 1" @tagClick="tagClick"></history-hot>
      <search-tips-list
        v-else-if="blockShow == 2"
        :searchTipsListData="searchTipsListData"
        @cellClick="tagClick"
        :searchTag="searchTag"
      ></search-tips-list>
      <sciences v-else :searchTipsListData="searchTipsListData"></sciences>
    </div>
  </div>
</template>

<script>
import HistoryHot from "@/components/HistoryHot.vue";
import { GetSearchDate, GetSearchTipsListData } from "@/request/api";
import SearchTipsList from "@/components/SearchTipsList.vue";
import Sciences from "@/components/SearchSciences.vue";
export default {
  data() {
    return {
      // 搜索的文字,用户输入的文本
      searchVal: "",
      // 占位符文本
      placeholderVal: "",
      // blockShow 值可以为1 / 2 / 3
      // 为1,表示展示历史记录和热门搜索
      // 为2,表示展示搜索提示列表
      // 为3,表示展示搜索的产品的内容
      blockShow: 1,
      httKeywordListData: [], //热门搜索列表数据
      searchTipsListData: [], //搜索实时提示的列表数据
      searchTag: [], //保存历史搜索
    };
  },
  created() {
    // GetSearchDate().then((res) => {});
  },
  methods: {
    tagClick(val) {
      this.onSearch(val);
    },
    onSearch(val) {
      // 用户回车搜索的时候执行,val就是用户输入的值
      // console.log("回车打印", val);
      this.blockShow = 3;
      GetSearchTipsListData({ items: val }).then((res) => {
        this.searchTipsListData = res.data;
      });
    },
    onCancel() {
      this.$router.go(-1);
    },
    onInput(val) {
      // console.log(val);
      this.blockShow = 2;

      // 发送请求,获取实时搜索的列表
      GetSearchTipsListData({ items: val }).then((res) => {
        // console.log("*********************************", res);
        this.searchTipsListData = res.data;
      });
    },
  },
  components: {
    HistoryHot,
    SearchTipsList,
    Sciences,
  },
};
</script>

<style lang="scss" scoped>
.search-popup {
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0vh;
  background-color: #efefef;
  z-index: 99;
}
</style>